<template>
	<Tabs>
		<TabPane label="身份角色编辑">
			<Form ref="form" :model="formData" :rules="rules" label-position="top">
				<FormDescItem label="角色名称" prop="name" desc="设置角色名称，以便于区分账号角色，角色名称不可重复">
					<Input v-model="formData.name" />
				</FormDescItem>
				<FormItem label="权限设置" prop="rules">
					<Transfer
						:titles="['系统权限', '赋予权限']"
						:operations="['撤销权限', '添加权限']"
				        :data="nodes"
				        :target-keys="formData.rules"
				        :list-style="listStyle"
				        :render-format="renderTransfer"
						filterable
				        @on-change="handleChangeTransfer"
				    >
				    	<div :style="{float: 'right', margin: '5px'}">
				            <Button size="small" @click="init">刷新</Button>
				        </div>
				    </Transfer>
				</FormItem>
				<FormItem>
					<Button type="primary" :loading="committing" @click="handleSubmit">保存设置并启用</Button>
					<Button @click="handleBack">返回列表</Button>
				</FormItem>
			</Form>
			
			<LoadingMask v-if="loading"></LoadingMask>
			
		</TabPane>
	</Tabs>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
import LoadingMask from '@/components/LoadingMask.vue';
export default {
	name: '',
	components: {
		FormDescItem,
		LoadingMask
	},
	data() {
		return {
			loading: false,
			committing: false,
			nodes: [],
			listStyle: {
                width: '250px',
                height: '300px'
           },
			formData: {
				id: '',
				name: '',
				rules: []
			},
			rules: {
				name: [
					{required: true, message: '请填写角色名称', trigger: 'blur'}
				],
				rules: [
					{required: true, type: 'array', message: '请选择角色赋予的权限', trigger: 'change'}
				]
			}
		}
	},
	mounted() {
		if(this.$route.query.id) {
			this.formData.id = this.$route.query.id;
		}
		this.init();
	},
	methods: {
		async init() {
			this.loading = true;
			// 权限节点
			await Util.ajax.post(this.API['API_SETTING_NODE_LISTS'], {}).then(res => {
				this.nodes = res.map(item => {
					return {
						key: item.id,
						label: item.title,
						disabled: item.status ? false : true
					}
				})
				this.formData.rules = [];
			}).catch(() => {
				
			})
			// 角色详情
			if(this.formData.id) {
				await Util.ajax.post(this.API['API_SETTING_ROLE_DETAIL'], {id: this.formData.id}).then(res => {
					this.formData.name = res.name;
					this.formData.rules = res.rules.split(',').map(item => {
						return Number(item);
					});
				}).catch(() => {
					
				})
			}
			this.loading = false;
		},
		renderTransfer(item) {
			return item.label;
		},
		handleChangeTransfer (newTargetKeys, direction, moveKeys) {
            this.formData.rules = newTargetKeys;
       	},
       	handleSubmit() {
       		this.$refs.form.validate((valid) => {
       			if(valid) {
       				let params = {
       					name: this.formData.name,
       					rules: this.formData.rules.join(',')
       				}
       				
       				this.committing = true;
       				if(this.formData.id) {
       					params.id = this.formData.id;
       					Util.ajax.post(this.API['API_SETTING_ROLE_SAVE'], {data: params}).then((res) => {
	       					this.$Message.success({
	       						content: '保存成功',
	       						onClose: () => {
	       							this.handleBack();
	       						}
	       					})
	       				}).catch(() => {
	       					this.committing = false;
	       				})
       				}else{
       					Util.ajax.post(this.API['API_SETTING_ROLE_CREATE'], {data: params}).then((res) => {
	       					this.$Message.success({
	       						content: '添加成功',
	       						onClose: () => {
	       							this.handleBack();
	       						}
	       					})
	       				}).catch(() => {
	       					this.committing = false;
	       				})
       				}
       			}
       		})
       	},
       	handleBack() {
			this.$router.back();
		}
	}
}
</script>